<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <h2 class="fromDivTit"><span>请填写验房日期</span><i v-if="handoverInfo.step > 4" class="edit-icon" @click="activeEdit" /></h2>
          <el-form ref="stepForm" :model="stepForm" :rules="stepFormRules" label-width="100px" class="formDiv">
            <el-row style="padding: 34px 40px 20px;">
              <el-col :span="18">
                <el-form-item label="验房日期:" label-width="120px" prop="checkTime">
                  <el-date-picker v-model="stepForm.checkTime" :disabled="disabledEdit" type="date" placeholder="确认验房日期:" style="width:100%;max-width:493px;" />
                </el-form-item>
                <el-form-item label="备注:" label-width="120px" prop="checkTimeNote">
                  <el-input v-model="stepForm.checkTimeNote" :disabled="disabledEdit" type="textarea" :rows="4" placeholder="请输入内容" style="width:100%;max-width:493px;" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <div v-if="jumpInfo.length > 0" class="jump-note">
                  <div class="jump-note__title">跳过原因：</div>
                  <div class="jump-note__note">{{ jumpInfo[0].jumpNote }}</div>
                </div>
              </el-col>
            </el-row>
            <div v-if="handoverInfo.step > 4" class="dialog-footer">
              <el-button v-if="!disabledEdit" type="primary" @click="editCtrl">保存</el-button>
            </div>
            <div v-else class="dialog-footer">
              <el-button :disabled="disabled" :type="disabled ? 'info' : 'primary'" @click="stepCtrl">下一步</el-button>
              <el-button type="primary" @click="jump">跳过此步</el-button>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { idleSubmitStep4, idleHandoverEdit } from '@/api/handover'

export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    handoverInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      disabled: true,
      disabledEdit: false,
      jumpInfo: [],
      stepForm: {
        checkTime: '',
        checkTimeNote: ''
      },
      stepFormRules: {
        checkTime: [
          { required: true, message: '请确验房日期', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    stepForm: {
      handler(newVal, oldVal) {
        if (newVal.checkTime) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    this.initInfo()
  },
  methods: {
    jump() {
      this.$emit('jump', this.stepForm)
    },
    async stepCtrl() {
      const params = {
        ...this.stepForm,
        id: this.id
      }
      this.stepForm.id = this.id
      const res = await idleSubmitStep4(params)
      if (res.code === 200) {
        this.$emit('next')
      }
    },
    async editCtrl() {
      const params = {
        ...this.stepForm,
        id: this.id,
        stepName: '待确认验房时间'
      }
      this.stepForm.id = this.id
      const res = await idleHandoverEdit(params)
      if (res.code === 200) {
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success'
        })
        this.$emit('edit')
      }
    },
    initInfo() {
      Object.keys(this.stepForm).map(i => {
        this.stepForm[i] = this.handoverInfo[i]
        console.log(this.handoverInfo[i])
      })
      if (this.handoverInfo.jumpList) {
        this.jumpInfo = this.handoverInfo.jumpList.filter(item => item.jumpStep === 4)
      }
      if (this.handoverInfo.step > 4) {
        this.disabledEdit = true
      }
    },
    activeEdit() {
      this.disabledEdit = !this.disabledEdit
    }
  }
}
</script>
<style lang="scss" scoped>
.formDiv {
  background: #fff;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 40px;
  height: 63px;
  border-top: 1px solid #f2f2f2;
}

.jump-note {
  margin-top: 30px;
  margin-left: 16px;
  font-size: 12px;

  &__title {
    color: #5AC6B7;
    margin-bottom: 16px;
  }
}
</style>
